<template>
  <el-dialog
    width="50%"
    title="图片剪裁"
    :visible.sync="innerVisible"
    :close-on-click-modal="false"
    append-to-body>
    <div class="update-photo">
      <div class="left">
        <img class="img" :src="img" ref="img" style="width: 100%" />
      </div>
      <div class="right">
        <div>预览</div>
        <div id="preview" ref="preview"></div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 认</el-button>
    </div>
  </el-dialog>

</template>

<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import {uploadTtCover} from "@/api/campaign-management/campaign-management";
import * as qiniuTools from "@/util/qinnu_upload";

export default {
  name: "UpdatePhoto",
  props: {
    img: {
      type: [String, Object],
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      cropper: null,
      creativeUrl: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      const image = this.$refs.img
      const preview = this.$refs.preview
      this.cropper = new Cropper(image, {
        viewMode: 1,
        dragMode: 'move',
        cropBoxResizable: false,
        movable: false,
        rotatable: false,
        scalable: false,
        zoomable: false,
        zoomOnWheel: false,
        zoomOnTouch: false,
        toggleDragModeOnDblclick: false,
        autoCropArea: 1,
        initialAspectRatio: 720 / 1280,
        aspectRatio: 720 / 1280,
        preview: [preview]
      });
    })
  },
  methods: {
    onConfirm() {
      // 基于服务端的裁切使用 getData 方法获取裁切参数
      // console.log(this.cropper.getData())

      // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象
      this.cropper.getCroppedCanvas({width: 720, height: 1280}).toBlob(blob => {
        var file = new File([blob], 'filename.jpg', {type: 'contentType', lastModified: Date.now()}); // blob 转 file
        this.uploadQiniuCloud({
          file
        })
      })
    },
    async uploadTtCover(data) {
      const {data: res} = await uploadTtCover(data)
      console.log(res)
    },
    uploadQiniuCloud(file) {
      const that = this
      const fileData = qiniuTools.getFileData(file)
      const callback = {
        next(res) {
        },
        error(err) {
          this.$message.error("上传图片失败! err => " + err);
        },
        complete(res) {
          const url = 'http://' + fileData.server + '/' + res.key
          that.$set(that, 'creativeUrl', url)
          that.$emit('upload', url)
          that.innerVisible = false
          // that.logoUrl = url
        }
      }
      const uploader = qiniuTools.uploadQiniuCloud(file, fileData)
      uploader.subscribe(callback)
    },
  }
}
</script>

<style scoped lang="scss">
#preview {
  height: 160px;
  width: 80px;
  overflow: hidden;
}

.update-photo {
  width: 100%;
  display: flex;

  .left {
    width: 70%;
  }
  .right {
    margin-left: 20px;
  }
}
</style>
